<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
  *{
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .box{
    display: flex;
  }
  .box div{
    width: 50%;
  }
  .right{
    display: none;
  }
  .re{
    display: none;
  }
  .time{
    display: none;
  }
</style>
<body>
    <div class="box">
       <div class="left">
         <div class="login">
            <span>用户名：</span>
            <span class="content">
                <input type="text">
            </span>
            <span style="color:red" class="re">用户名必须是 6-18 位的 数字、字母、下划线</span>
         </div>
         <button onclick="logon()">登录</button>
       </div>
       <div class="right">
          <div class="rt-ct">
            <h4>p标签是干什么用的？</h4>
            <ul>
               
            </ul>
            <button onclick="submit()">提交答案</button>
            <p class="time">3s后进入下一题</p>
            <p class="foot"></p>
          </div>
       </div>
    </div>
</body>
</html>
<script>
   function logon(){ // 登录的函数
     let txt = document.querySelector('input').value;
     let re = /^[a-z0-9_-]{6,18}$/;
     if (re.test(txt)){
       document.querySelector('.content').innerHTML = txt;
       document.querySelector('.right').style.display = "block";
       render();
     } else {
        document.querySelector('.re').style.display = "inline";
     }
   }


   let checkIndex = 0; // 进行到第几题
   let err = 0,answer=0; // err 代表错误 answer 代表正确
   let list = [
    {
     title:"p标签是干什么用的？",
     checks:['实现换行的','显示图片的','制作按钮的','实现分段的'],
     answer: 3
   },{
     title:"a标签是干什么用的？",
     checks:['实现换行的','显示图片的','超链接按钮','实现分段的'],
     answer: 2
   },{
     title:"img标签是干什么用的？",
     checks:['实现换行的','显示图片的','制作按钮的','实现分段的'],
     answer: 1
   },{
    title:"br标签是干什么用的？",
     checks:['实现换行的','显示图片的','制作按钮的','实现分段的'],
     answer: 0
   }]
   
   function render(){
     document.querySelector('.rt-ct h4').innerHTML = list[checkIndex].title;
     let str = ""
     list[checkIndex].checks.forEach(item => {
       str+=`<li><input type="radio" name="txt">${item}</li>`
     })
     document.querySelector('.rt-ct ul').innerHTML = str;
     document.querySelector('.foot').innerHTML = `共有${checkIndex+1}/4道题，答对${answer}答错${err}`;
   }

   
   function submit(){ // 提交答案
      time();
   }


   function time (){
     let dom = document.querySelector('.time');
     dom.style.display = "block";
     let num = 3;
     let time = setInterval(() => {
       if (num!==0){
         num--;
         dom.innerHTML = `${num}s后进入下一题`;
         document.querySelector('.right button').disabled = true;
       } else {
        clearInterval(time);
        dom.innerHTML = `3s后进入下一题`;
        dom.style.display = "none";
        document.querySelector('.right button').disabled = false;
        // 进入下一题的逻辑
        let nodes = [...document.querySelectorAll('ul input')];
        let i = nodes.findIndex(item => item.checked);
        if(i == list[checkIndex].answer){
            answer++;
        } else {
            err++;
        }
        if (checkIndex <=3){
            checkIndex++; // 进入下一题
        }
        render();
       }
     },1000)
   }
</script>